<template>
  <div class="category">
    <van-search
      shape="round"
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @serch="onSearch"
      @canel="onCancel"
    />
    <div class="main_box">
      <!-- 左侧 -->
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item
          :title="item.name"
          v-for="item in categoryList"
          :key="item.id"
        />
      </van-sidebar>
  <!-- 右侧 -->
      <div class="right">
        <div class="top_img">
          <img :src="currentCategory.banner_url" alt="">
        </div>
        <h4>{{currentCategory.name}}</h4>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="value in currentCategory.subCategoryList"
            :key="value.id"
            :icon="value.banner_url"
            :text="value.name"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllCategoryData, currentCategoryData } from "@/http/http";
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      categoryList: [],
      currentCategory: {},
    };
  },
  created() {
    getAllCategoryData().then((res) => {
      console.log(res)
      this.categoryList = res.data.data.categoryList;
      this.currentCategory = res.data.data.currentCategory;
    })
  },
  methods: {
    onSearch() {
// 搜索
    },
    onCancel() {
// 取消
    },
    onChange(index) {
      this.activeKey = index;
      currentCategoryData({ id:this.categoryList[index].id }).then((res) => {
        console.log(res)
        this.currentCategory = res.data.data.currentCategory
      })
    }
  }
}
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
.main_box {
  display: flex;
  .right {
    flex: 1;
    .top_img {
      width: 100%;
      img {
        width: 100%;
        height: 140px;
        display: block;
      }
    }
    h4 {
      text-align: center;
      line-height: 70px;
    }
  }
}
</style>
